<template>
    <div v-show="overlayShow" class="user-card-example">
        <div class="example">
            <van-icon @click="hide" id="close-user-card-example" name="cross" />
            <img id="user-card-example-img" :src="exampleImg">
        </div>
		<van-overlay :show="overlayShow" @click="hide" />
    </div>
</template>

<script>
// UI组件
import { Overlay } from 'vant'

// 自定义方法
import { getBusCardExample } from '_network/request'

import Vue from 'vue'
Vue.use(Overlay)

export default {
    name: 'UserCardExample',
    data() {
        return {
            overlayShow: false,
            exampleImg: null,
        }
    },
    methods: {
        hide() {
            this.overlayShow = false
            this.$emit('closeWindow')
        },
        showWindow() {
            if (this.exampleImg) {
                this.overlayShow = true
            } else {
                const that = this
                getBusCardExample(data => {
                    if (data) {
                        that.exampleImg = data
                        that.overlayShow = true
                    }
                })
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.example {
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 102;

    #user-card-example-img {
        width: 100%;
    }

    #close-user-card-example {
        position: absolute;
        top: 6px;
        right: 4px;
        font-weight: bold;
        color: #999999;
    }
}
</style>